<template>
    <div class="padding20">
        <!--条件查询-->
        <el-form :model="queryParam" label-position="left" label-width="80px" size="small">
            <el-row :gutter="30" justify="start">
                <el-col :xs="12" :sm="6">
                    <el-form-item label="查询日期:">
                        <el-date-picker
                                v-model="queryParam.time"
                                style="width: 100%"
                                type="month"
                                value-format="yyyy-MM-dd"
                                placeholder="选择月">
                        </el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :xs="12" :sm="6">
                    <el-form-item label="行业类别:">
                        <el-cascader clearable
                                     style="width: 100%"
                                     v-model="queryParam.industry" :options="industryList"
                                     :show-all-levels="false" :props="{value: 'id', label: 'name',multiple: true}"/>
                    </el-form-item>
                </el-col>
                <el-col :xs="12" :sm="6">
                    <el-form-item label="招聘岗位:">
                        <el-select
                                no-data-text="分类下暂无可选招聘岗位"
                                clearable style="width: 100%" v-model="queryParam.jobName"
                                multiple
                                placeholder="招聘岗位">
                            <el-option
                                    v-for="item in jobNames"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="12" :sm="5">
                    <el-form-item label-width="0px">
                        <el-button size="small" @click="selectPage" type="primary">查询</el-button>
                        <el-button size="small" @click="clearParam">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <!--操作按钮-->
        <div class="mi-container">
            <el-button size="mini" class="mi-item" type="primary" icon="el-icon-folder-opened" @click="exportExcel()">
                导出Excel
            </el-button>
        </div>
        <!--        岗位类别-->
        <!--        人员类型:-->
        <!--        政治面貌:-->
        <!--        学历:-->
        <!--        性别:-->
        <!--        年龄段-->
        <el-table
                empty-text="当前条件下，暂无匹配数据"
                :data="tableData"
                border fit style="width: 100%"
                highlight-current-row show-overflow-tooltip
                :show-summary="true">
            <!-- :summary-method="getSummaries" -->
            <el-table-column label="行业类别" align="center">
                <template slot-scope="scope">
                    <span> {{scope.row.industryName|nullFilter}}</span>
                </template>
            </el-table-column>
            <el-table-column label="招聘岗位" align="center">
                <template slot-scope="scope">
                    <span> {{ scope.row.jobName | nullFilter}}</span>
                </template>
            </el-table-column>
            <el-table-column sortable prop="lackCount" label="招聘人数" align="center">
                <template slot-scope="scope">
                    <span> {{ scope.row.lackCount | nullFilter}}</span>
                </template>
            </el-table-column>
            <el-table-column sortable prop="intentionCount" label="意向人数" align="center">
                <template slot-scope="scope">
                    <span> {{ scope.row.intentionCount | nullFilter}}</span>
                </template>
            </el-table-column>
            <el-table-column sortable prop="recruitCount" label="成功人数" align="center">
                <template slot-scope="scope">
                    <span> {{ scope.row.recruitCount | nullFilter}}</span>
                </template>
            </el-table-column>
        </el-table>

        <!--分页插件-->
        <Pagination @pagination="selectPage"
                    v-show="pageParam.pages>0"
                    :total-data-num="pageParam.total"
                    :current-page="pageParam.current"
                    :page-size="pageParam.size"/>


        <el-table
                v-show="false"
                v-if="outTableIf"
                :data="outTableData"
                id="out-table"
                border fit style="width: 100%"
                highlight-current-row show-overflow-tooltip
                :show-summary="true">
            <!-- :summary-method="getSummaries" -->
            <el-table-column label="行业类别" align="center">
                <template slot-scope="scope">
                    <span> {{scope.row.industryName|nullFilter}}</span>
                </template>
            </el-table-column>
            <el-table-column label="招聘岗位" align="center">
                <template slot-scope="scope">
                    <span> {{ scope.row.jobName | nullFilter}}</span>
                </template>
            </el-table-column>
            <el-table-column sortable prop="lackCount" label="招聘人数" align="center">
                <template slot-scope="scope">
                    <span> {{ scope.row.lackCount | nullFilter}}</span>
                </template>
            </el-table-column>
            <el-table-column sortable prop="intentionCount" label="意向人数" align="center">
                <template slot-scope="scope">
                    <span> {{ scope.row.intentionCount | nullFilter}}</span>
                </template>
            </el-table-column>
            <el-table-column sortable prop="recruitCount" label="成功人数" align="center">
                <template slot-scope="scope">
                    <span> {{ scope.row.recruitCount | nullFilter}}</span>
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>

<script lang="ts">
    import {Component, Watch} from 'vue-property-decorator'
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import Kit from "@/core/mixin/Kit";
    import $http from "@/core/utils/http";
    import {API} from "@/core/api/API";
    import {errorMsg, warningMsg} from "@/core/utils/message";
    import {clearArray, copy, isBlank, isNotBlank, tree} from "@/core/utils/Utils";
    import FileSaver from "file-saver";
    import XLSX from 'xlsx'
    import {subStr} from "@/core/filters";
    import {getStorage} from "@/core/utils/storage";
    import Pagination from "@/components/Pagination/Pagination.vue";
    import {closeLoading, showLoading} from "@/core/utils/loading";

    @Component({
        name: 'RecruitInfoTable',
        components: {Pagination},
    })
    export default class RecruitInfoTable extends mixins(BaseVue, Kit) {
        //查询条件
        queryParam: any = {time: getStorage("nowDate"), industry: []}

        //初始化
        async mounted() {
            this.getIndustryTypeList();
            this.selectPage();
        }


        //行业类别下的全部岗位名
        // industry: any = [];
        jobNames: any = [];
        //当前所勾选的全部子二级ID
        checkIndustry: any = [];

        @Watch('queryParam.industry', {immediate: true})
        private watchIndustry(value: any) {
            if (isNotBlank(value)) {
                if (value.length == 0) {
                    clearArray(this.jobNames)
                    clearArray(this.queryParam.jobName)
                    return;
                }
                clearArray(this.checkIndustry);
                for (let a of value) {
                    this.checkIndustry.push(a[1]);
                }
                $http.post(API.recruitTypeJobNames, {industry: this.checkIndustry}).then((res: any) => {
                    if (res.success) {
                        this.jobNames = res.data;
                    }
                });
            } else {
                clearArray(this.jobNames)
                clearArray(this.checkIndustry);
                clearArray(this.queryParam.jobName)
            }
        }


        //行业类别
        industryList: any = [];

        // 获取行业类型数据
        getIndustryTypeList() {
            $http.post(API.industryTypeList, {}).then((res: any) => {
                if (res.success) {
                    this.industryList = tree(res.data);
                } else {
                    errorMsg("行业类型数据获取失败");
                }
            });
        }


        //查询分页
        selectPage(page: any = null) {
            if (isBlank(this.queryParam.time)) {
                warningMsg("请选择查询日期");
                return;
            }

            //初始化时间
            // this.queryParam.time = getStorage("nowDate")
            this.queryParam.industryParam = copy(this.checkIndustry);
            this.pageData(API.recruitStatisticsTablePage, page);
            // .then((res: any) => {
            //     setStorage("m_b_data_c", this.tableData)
            //     this.setMergeRowCount(this.tableData, this.rowKey);
            // })
        }

        //重新获取焦点
        activated() {
        }

        //失去焦点
        deactivated() {
        }


        /**
         * excel导出
         * @param outTableIf 使用时设置为true，使用后设置为false
         * @param outTableData 导出的数据，导出时需要给延时
         */
        outTableIf = false;
        outTableData = [];

        exportExcel() {
            if (isBlank(this.queryParam.time)) {
                warningMsg("请选择查询日期");
                return;
            }

            showLoading("正在导出excel...")
            this.outTableIf = true;
            let queryParam = copy(this.queryParam);
            queryParam.type = "all_export"
            $http.post(API.recruitStatisticsTablePage, queryParam)
                .then((res: any) => {
                    showLoading("正在导出excel...")
                    this.outTableData = res.data;
                    setTimeout(() => {
                        let fileName = this.queryParam.time ? '招聘情况反馈统计' + subStr(this.queryParam.time, -3) + '.xlsx' : '招聘情况反馈统计.xlsx';
                        // 转换成excel时，使用原始的格式，解决数字列自动转科学计数法问题
                        let xlsxParam = {raw: true};
                        // out-table关联导出的dom节点
                        let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'), xlsxParam);
                        // 获取二进制字符串作为输出
                        let wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'});
                        try {
                            FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), fileName);
                        } catch (e) {
                            //console.log(e)
                        }
                        this.outTableIf = false;
                        this.outTableData = [];
                        closeLoading()
                    }, 2000)
                });
        }

    }
    //合计
    // getSummaries(param: any) {
    //     let {columns, data} = param;
    //     let sums: any = [];
    //     columns.forEach((column: any, index: any) => {
    //         if (index === 0) {
    //             sums[index] = '合计';
    //             return;
    //         }
    //
    //         if (index === 1) {
    //             sums[index] = '';
    //             return;
    //         }
    //         data = [];
    //         if (getStorage("m_b_data_c")) data = getStorage("m_b_data_c");
    //
    //
    //         ////console.log(data);
    //         const values = data.map((item: any) => Number(item[column.property]));
    //         // ////console.log(values);
    //
    //         if (!values.every((value: any) => isNaN(value))) {
    //             sums[index] = values.reduce((prev: any, curr: any) => {
    //                 const value = Number(curr);
    //                 if (!isNaN(value)) {
    //                     return prev + curr;
    //                 } else {
    //                     return prev;
    //                 }
    //             }, 0);
    //             sums[index] += ' 人';
    //         }
    //     });
    //     // ////console.log(sums)
    //     return sums;
    // }

    /**
     * 处理合并行
     * 每一行的数据遍历
     * 关键在于 1.什么时候合并 2.合并多少行
     *
     * @param row 行数据
     * @param column 行对象
     * @param rowIndex 当前是第几行
     * @param columnIndex 当前是第几列
     *
     * @return rowspan
     * @return colspan
     */
    // objectSpanMethod({row, column, rowIndex, columnIndex}: any) {
    //     let span: any = [];
    //     // ////console.log("columnIndex === 0")
    //     //处理第一列的合并情况,遍历
    //     if (columnIndex === 0) {
    //         // ////console.log("columnIndex === 0")
    //         let keyValue = row[this.rowKey];
    //         let rowspan = this.mergeRowCount[keyValue];
    //
    //         //尚未处理
    //         if (this.rowIsProcess[keyValue] != "processed") {
    //             this.rowIsProcess[keyValue] = "processed";
    //             span = [rowspan, 1];
    //         }
    //
    //         //已经处理
    //         else {
    //             // ////console.log(this.rowIsProcess[keyValue])
    //             span = [0, 1];
    //         }
    //
    //         //全部循环完毕，重新初始化
    //         if (this.tableData.length > 0 && rowIndex == this.tableData.length - 1) {
    //             this.rowIsProcess = {};
    //         }
    //
    //         //返回当前的合并状态
    //         return span;
    //     }
    // }

    //合并行字段
    // rowKey: any = "industryName"
    //合并状态
    // rowIsProcess: any = {}
    // 合并行数
    // mergeRowCount: any = {};

    /**
     * 计算合并行
     * @param key 合并行的字段
     * @param array 注意，必须是，已经按照和并字段,排序后的数据源
     * @return mergeRowCount {"王小龙":5,"王小虎":10,"小明":3}
     */
    // setMergeRowCount(array: any, key: any) {
    //     this.mergeRowCount = {};
    //     let arrayData: any = copy(array);
    //     //循环所有数据
    //     for (let i in arrayData) {
    //         let keyValue = arrayData[i][key];
    //         let keyValueCount = this.mergeRowCount[keyValue];
    //         if (keyValueCount) continue;
    //         let count = 1;
    //         for (let j in arrayData) {
    //             if (arrayData[j][key] == keyValue && i !== j) {
    //                 count += 1
    //             }
    //         }
    //         this.mergeRowCount[keyValue] = count
    //     }
    //     // ////console.log(this.mergeRowCount)
    // }

</script>

<style scoped type="scss">

</style>


